<template>
  <el-row :gutter="20" style="min-width: 1500px; overflow-x: none">
    <el-col :span="16" style="padding-right: 0">
      <div>
        <div class="grid_tutorial x-m-b-10">
          <div class="grid_tutorial--top">
            <span class="-title">发布广告</span><span>4步教你轻松发布广告</span>
          </div>
          <div class="x-flex x-m-t-20" style="justify-content: center">
            <div class="son-stepBox">
              <img alt="" src="@/assets/facility.svg" />
              <text class="x-m-l-8">第一步：</text>
              <span class="son-stepBox--btn" @click="router.push('/goods/list')"
                >添加设备</span
              >
            </div>
            <span class="x-m-16">
              <img alt="" src="@/assets/doubleHeadedArrow.svg" />
            </span>
            <div class="son-stepBox">
              <img alt="" src="@/assets/home-text.svg" />
              <text class="x-m-l-8">第二步：</text>
              <span
                class="son-stepBox--btn"
                style="color: #0fc684"
                @click="router.push('/advertising/materialManagement')"
                >上传素材</span
              >
            </div>
            <span class="x-m-16">
              <img alt="" src="@/assets/doubleHeadedArrow.svg" />
            </span>
            <div class="son-stepBox">
              <img alt="" src="@/assets/addtext.svg" />
              <text class="x-m-l-8">第三步：</text>
              <span
                class="son-stepBox--btn"
                @click="router.push('/advertising/programManagement')"
                >创建节目</span
              >
            </div>
            <span class="x-m-16">
              <img alt="" src="@/assets/doubleHeadedArrow.svg" />
            </span>
            <div class="son-stepBox">
              <img alt="" src="@/assets/AD.svg" />
              <text class="x-m-l-8">第四步：</text>
              <span
                class="son-stepBox--btn"
                style="color: #0fc684"
                @click="router.push('/advertising/advertisingRelease')"
                >发布广告</span
              >
            </div>
          </div>
        </div>
      </div>
      <div>
        <el-col
          :span="8"
          style="padding-right: 0; margin-top: 10px; padding-left: 0"
        >
          <div class="grid_below" style="width: 300%; height: 406px">
            <div class="x-flex x-row-between">
              <text>设备</text>
              <el-button text type="primary" @click="router.push('/goods/list')"
                >查看更多</el-button
              >
            </div>

            <div class="grid_resources--char x-flex x-row-between">
              <div class="-chartShape" style="width: 100%">
                <div ref="chartRefs"></div>
              </div>
            </div>
          </div>
        </el-col>
      </div>
    </el-col>
    <el-col :span="8">
      <div class="grid_tutorial grid_public">
        <div class="x-flex x-row-between">
          <span>公告</span>
          <el-button
            text
            type="primary"
            @click="router.push('/index/allNotifications')"
            >查看更多</el-button
          >
        </div>
        <div class="grid_public--anent">
          <div
            v-for="(item, index) in annTen"
            :key="index"
            class="-item_Announcement x-flex x-row-between"
            @click="onNotifies(item.id)"
          >
            <span>
              <el-tag
                :type="annMen.alertColor[item.noticeType]"
                class="x-m-r-4"
                size="small"
                >{{ annMen.alert[item.noticeType] }}</el-tag
              >
              <text>{{ item.noticeContent }}</text>
            </span>
            <text class="-time">{{ item.creationDate }}</text>
          </div>
        </div>
      </div>
    </el-col>
  </el-row>
  <div style="display: flex; margin-top: 10px">
    <div class="grid_below">
      <div class="x-flex x-row-between">
        <text>节目</text>
        <el-button
          text
          type="primary"
          @click="router.push('/advertising/programManagement')"
          >查看更多</el-button
        >
      </div>
      <div class="grid_below--graphics">
        <div class="-equip -tv">
          <div class="-img">
            <img alt="" src="@/assets/1.svg" />
          </div>
          <text class="-equip_num">{{ programInfo }}</text>
          <text>节目数量</text>
        </div>
      </div>
    </div>
    <div class="grid_belows" style="margin-left: 10px">
      <div class="x-flex x-row-between">
        <text>节目单</text>
        <el-button
          text
          type="primary"
          @click="router.push('/advertising/advertisingRelease')"
          >查看更多</el-button
        >
      </div>
      <div class="grid_below--graphics">
        <div class="-equip -quantity">
          <div class="imgs">
            <img alt="" src="@/assets/program.svg" />
          </div>
          <text class="-equip_num">{{ programSingleInfo }}</text>
          <text>节目单数量</text>
        </div>
      </div>
    </div>
  </div>
  <div
    class="grid_tutorial grid_resources"
    style="margin-top: 10px; margin-bottom: 16px"
  >
    <div class="x-flex x-row-between">
      <span>资源</span>
      <el-button
        style="z-index: 99"
        text
        type="primary"
        @click="router.push('/index/moreResources')"
        >查看更多
      </el-button>
    </div>
    <div class="grid_resources--char x-flex x-row-between">
      <div class="-chartShape">
        <div ref="chartRef"></div>
      </div>
      <div class="-chartShape">
        <div ref="chartFlowRef"></div>
      </div>
    </div>
  </div>
  <div style="color: #9d9d9d; margin: auto; text-align: center">
    版本号:1.0.1a(Build23062112)
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, computed } from "vue";
import { useRouter } from "vue-router";
import { pieInit, pieInits } from "./chartParameters";
import { statistics, resourcesnotice, mailMessage } from "@/api/advertising";
import { ElMessage } from "element-plus";
import { useWindowSize } from "@vueuse/core";
const { width, height } = useWindowSize(); // 获取窗口宽度
const router = useRouter();
// 饼图数据
const chartRef = ref(null);
const chartRefs = ref(null);
const chartFlowRef = ref(null);
//公告
const annTen = ref([
  { text: "内容最新优惠活动", time: "2023-05-23", status: 1 },
  {
    text: "新增内容尚未通过审核，详情请点击查看。",
    time: "2023-05-23",
    status: 2,
  },
  { text: "新增开放设计市场功能", time: "2023-05-23", status: 3 },
]);
const onNotifies = (ids: any) => {
  localStorage.setItem("HomeId", ids);
  router.push({ path: "/index/notifistContent", query: { queryId: ids } });
};
const annMen = computed(() => {
  const alert = {
    2: "产品",
    3: "活动",
    4: "其他",
  };
  const alertColor = {
    2: "#1bc98a",
    3: "warning",
    4: "success",
  };
  return { alert, alertColor };
});
const equipInfo = ref({});
const programInfo = ref(0);
const programSingleInfo = ref(0);
// 信息统计
const statisticsd = async () => {
  let { data } = await statistics();
  if (data.code !== 1)
    return ElMessage({ message: data.msg, type: "error", duration: 1000 });
  function formatFileSize(fileSizeInBytes: number | string): string {
    const units = ["B", "KB", "MB", "GB", "TB"];
    let index = 0;
    let fileSize = Number(fileSizeInBytes) * 1024 * 1024;
    while (fileSize >= 1024 && index < units.length - 1) {
      fileSize /= 1024;
      index++;
    }
    return fileSize.toFixed(1) + units[index];
  }
  let chartRrogramRef = data.data.resourcesInfo;
  data.data.flowInfo.map((item: any) => {
    item.type = item.type + "流量";
    return item;
  });
  let flowData = data.data.flowInfo;
  console.log(data.data.flowInfo.type);
  data.data.resourcesInfo.map((item: any) => {
    formatFileSize(item.value);
    return item;
  });
  chartInit(chartRrogramRef, flowData);
  // chartInits(chartRrogramRef, data.data.deviceInfo)
  equipInfo.value = data.data.deviceInfo;
  chartInits(equipInfo.value, equipInfo.value);
  programInfo.value = data.data.programSum;
  programSingleInfo.value = data.data.programListSum;
};
const chartInit = (chartRrogramRef: any, flowData: any) => {
  pieInit(chartRef, chartRrogramRef, [
    "#39a0ff",
    "#34c9c9",
    "#4ec973",
    "#fcd434",
    "#f0f2f5",
  ]).render();
  pieInit(chartFlowRef, flowData, ["#9bdeff", "#0daeff"], "使用流量").render();
};
const chartInits = (chartRrogramRef: any, flowData: any) => {
  pieInits(chartRefs, chartRrogramRef, [
    "#0fc684",
    "#f83930",
    "#fcd434",
  ]).render();
};
// 最新公告
const resourcesnotices = async () => {
  let res = await resourcesnotice();
  res.data.data = res.data.data.map((item: any) => {
    const creationDateWithoutTime = item.creationDate.split(" ")[0];
    return { ...item, creationDate: creationDateWithoutTime };
  });
  annTen.value = res.data.data;
};
onMounted(() => {
  statisticsd();
  resourcesnotices();
});
</script>

<style lang="scss" scoped>
::v-deep .el-tag.el-tag--success {
  --el-tag-text-color: #1bc98a;
}
::v-deep .grid_below--graphics[data-v-07ce50d4] {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 100%;
  margin: 45px 0;
  /* line-height: 50; */
}
::v-deep .grid_below--graphics .-equip_num[data-v-07ce50d4] {
  font-size: 26px;
  font-weight: 500;
  color: #303233;
  line-height: 35px;
  margin-top: 10px;
}
.grid_tutorial {
  width: 100%;
  height: 124px;
  background-color: white;
  border-radius: 8px;
  padding: 20px;
  font-size: 14px;
  font-weight: 500;

  &--top {
    font-weight: 400;
    color: #a3aab2;

    .-title {
      font-weight: 500;
      color: #303233;
      margin-right: 10px;
    }
  }

  .son-stepBox {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 234px;
    height: 48px;
    border-radius: 4px;
    background-color: #f6f7f9;
    color: #5e6369;

    &--btn {
      color: #0daeff;
      cursor: pointer;
      transition: color 0.3s;

      &:hover {
        color: #68caff;
      }
    }
  }
}

.grid_resources {
  height: 406px;
  overflow: hidden;

  &--char {
    width: 100%;
    // height: 85%;

    .-chartShape {
      width: 50%;

      &:last-child {
        // border-left: 1px solid #EBEFF3;
      }
    }
  }
}

.grid_public {
  height: 540px;

  &--anent {
    padding: 10px 10px;
    height: 470px;
    overflow: auto;

    .-item_Announcement {
      font-size: 14px;
      color: #5e6369;
      font-weight: 400;
      line-height: 43px;
      border-bottom: 1px solid #ebeff3;
      cursor: pointer;
      transition: background-color 0.3s;

      &:hover {
        background-color: #f6f7f9;
      }

      .-time {
        color: #a3aab2;
      }
    }
  }
}
::v-deep .el-input input::selection {
  background-color: #79bbff;
}
.imgs {
  width: 62px;
  height: 62px;
  line-height: 77px;
  // margin-top: -16px;
  border: 3px solid #f9be4b;
  border-radius: 50%;
  background-color: #f9be4b;
  text-align: center;
  img {
    width: 30px;
    height: 30px;
  }
}
.grid_below {
  width: 146%;
  height: 406px;
  border-radius: 8px;
  background-color: white;
  font-size: 14px;
  font-weight: 500;
  padding: 20px;

  &--graphics {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 100%;

    .-equip {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 210px;
      height: 210px;
      background-color: #e7f8ff;
      border-radius: 50%;
      box-shadow: inset 0 0 9px rgba(47, 218, 255, 0.25);
      font-size: 12px;
      font-weight: 400;
      color: #a8adb2;

      .-img {
        width: 62px;
        height: 62px;
        line-height: 77px;
        // margin-top: -16px;
        border: 3px solid #17d08e;
        border-radius: 50%;
        background-color: #17d08e;
        text-align: center;
        img {
          width: 30px;
          height: 30px;
        }
      }

      &_num {
        font-size: 26px;
        font-weight: 500;
        color: #303233;
        line-height: 35px;
      }

      &.-tv {
        background-color: #e8fbf4;
        box-shadow: inset 0 0 9px rgba(47, 255, 155, 0.25);
      }

      &.-quantity {
        background-color: #fff9ed;
        box-shadow: inset 0 0 9px rgba(255, 172, 47, 0.25);
      }
    }

    .-marking {
      margin-top: 30px;
      font-size: 13px;
      font-weight: 400;
      color: #5e6369;

      span {
        margin-right: 30px;

        :deep(.el-badge) {
          vertical-align: -5px;
          margin-right: 8px;
        }

        &:last-child {
          margin-right: 0;
        }
      }
    }
  }
}
.grid_belows {
  width: 146%;
  height: 406px;
  border-radius: 8px;
  background-color: white;
  font-size: 14px;
  font-weight: 500;
  padding: 20px;
}
</style>
